<template>
    <up-popup :show="show" mode="bottom" :round="20" @close="close" @open="open" customStyle="background: #f8f8f8;">

        <view class="popup_head  ft fw-800 ft-32 flex-bwt">

            <view>
                <text>{{ filterKeys.length < 2 ? newDatas[filterKeys[0]]?.name : '筛选' }} </text>
                        <!-- {{ leftArr.includes(filterKeys[0]) }} -->
                        <text> {{ '（' + (leftArr.includes(filterKeys[0]) ? leftFilterLength : filterLength) + '）' }}
                        </text>
            </view>

            <image class="closeIcon" @click="close" src="https://cdn.oss.bon-top.cn/static_bc/images/close_black.png">
            </image>

        </view>
        <scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y">
            <view class="popup">
                <template v-for="keyid in filterKeys" :key="keyid">

                    <template v-if="keyid != 'country'">

                        <view class="pd-20-nobottom ft1" v-if="filterKeys.length > 1">{{ newDatas[keyid]?.name
                            }}（<text> {{
                                newDatas[keyid]?.names?.length
                                || 0 }}</text>）</view>
                        <view class="flex-start">
                            <view @click="toggleSelection(item, keyid, newDatas[keyid])" class="service ft flex-center"
                                :class="newDatas[keyid]?.names.includes(item.name) ? 'active' : newDatas[keyid]?.names.includes(item) ? 'active' : ''"
                                v-for="(item, index) in newDatas[keyid]?.list" :key="index">
                                {{ item.name ? item.name : item }}
                            </view>
                        </view>
                    </template>
                    <template v-else-if="keyid == 'country'">

                        <view class="" v-for="(parent, index) in newDatas[keyid]?.list" :key="index">
                            <view class="parent">{{ parent.name }}</view>

                            <view class="flex-start">
                                <view @click="toggleSelection(item, keyid, newDatas[keyid])"
                                    v-for="(item, index) in parent.children" :key="index" class="service ft flex-center"
                                    :class="newDatas[keyid]?.names.includes(item.name) ? 'active' : newDatas[keyid]?.names.includes(item) ? 'active' : ''">
                                    {{ item.name }}
                                </view>
                            </view>
                        </view>
                    </template>
                </template>

                <view :style="{ height: (98 + 68) + 'rpx' }"></view>
            </view>
        </scroll-view>
        <view class="btn_box">
            <view class="box flex-bwt" style="height: 98rpx;">
                <view class="reset flex-center mr-24" @click="reset">
                    <image class="wh-28" src="https://cdn.oss.bon-top.cn/static_bc/images/rest.png"></image>
                    <text class="wenzi">重置</text>
                </view>
                <view style="color: #dbf046" class="submit ft1 flex-center" @click="submit">
                    确定
                </view>
            </view>

        </view>
    </up-popup>
</template>
<script setup lang="js">
import { onMounted, reactive, ref, defineExpose, defineProps } from "vue";


const show = ref(true)
const props = defineProps(['filterKeys', 'datas', 'type'])
let { filterKeys, datas } = props
let newDatas = ref({})

console.log('datas', datas, filterKeys,)
const emit = defineEmits('getFiler', 'closeShow')


let noShowObj = reactive({
    'preferential': '活动优惠标签',
    'activity_tag': '活动标签',
    // 'overall_sort': '综合排序',
    'country': '洲/国家',
    'price_sort': '价格排序'
    // 'price_sort': '价格排序',
})

let labelObj = reactive({
    'preferential_ids': '活动优惠标签',
    'activity_tag_ids': '活动标签',
    'orderBy': '综合排序',
    'country_ids': '洲/国家',
    'orderType': '价格排序',
    'imm_identity_cate': '身份类别',
    'imm_handle_cate': '办理类别',
    'imm_handle_cycle': '办理周期',
    'imm_approved_time': '获批时间',
    'imm_live_require': '居住要求',
    'imm_nocrime_require': '无犯罪要求',
})
const close = () => {
    show.value = false;
    newDatas.value = datas

    emit('closeShow')
};
const open = () => {
    show.value = true;
};
const submit = () => {
    let isFilter = false
    if (filterLength.value > 0) isFilter = true
    // datas.some(f =>)
    console.log('传值给父组件进行搜索')
    datas = newDatas.value
    emit('getFiler', datas, filterLength.value, isFilter)
    show.value = false;
};
const reset = () => {
    console.log('重置', filterKeys)

    filterKeys.forEach(f => {
        newDatas.value[f].ids = []
        newDatas.value[f].names = []
    })
    setLeng(newDatas.value)

};
let filterLength = ref(0)
let leftFilterLength = ref(0)
onMounted(() => {
    newDatas.value = JSON.parse(JSON.stringify(datas))
    setLeng(newDatas.value)

})
const toggleSelection = (item, key, data) => {

    if (data.isRadio && !data.isArr) {
        // 单选模式 先清空在push
        newDatas.value[key].ids = []
        newDatas.value[key].names = []

        newDatas.value[key].ids.push(key == 'country' ? item.id : key == 'price_sort' ? item.orderType : item.orderBy)
        newDatas.value[key].names.push(item.name)

    } else {

        if (newDatas.value[key].ids.includes(data.isArr ? item : key == 'country' ? item.id : item.name)) {
            newDatas.value[key].ids = newDatas.value[key].ids.filter(f => f != (data.isArr ? item : key == 'country' ? item.id : item.name))
            newDatas.value[key].names = newDatas.value[key].names.filter(f => f != (data.isArr ? item : item.name))
        } else {

            newDatas.value[key].ids.push(data.isArr ? item : key == 'country' ? item.id : item.name)
            newDatas.value[key].names.push(data.isArr ? item : item.name)
        }


    }
    setLeng(newDatas.value)


}
let leftArr = reactive(['overall_sort', 'price_sort', 'country'])
const setLeng = (data) => {
    let length = 0
    // 处理左侧筛选
    if (leftArr.includes(filterKeys[0])) {
        leftFilterLength.value = 0
        Object.keys(data).forEach(f => {
            if (filterKeys[0] == f) leftFilterLength.value = Number(data[f].ids.length)
        })

    }

    filterLength.value = 0
    Object.keys(data).forEach(f => {
        console.log(Object.keys(noShowObj).includes(f))
        if (!Object.keys(noShowObj).includes(f)) length += Number(data[f].ids.length)
    })
    filterLength.value = length

    console.log('=========>', filterLength.value)

}
defineExpose({ open })
</script>
<style lang="scss" scoped>
.popup_head {
    width: 100%;
    margin: 0 auto;
    border-bottom: 2rpx solid #F1F1F1;
    height: 104rpx;
    padding: 20rpx 36rpx 20rpx 40rpx;
    box-sizing: border-box;
    // background-color: #F8F8F8;

    .closeIcon {
        width: 36rpx;
        height: 36rpx;
    }

}

.popup {
    height: 920rpx;
    // border: 2rpx solid red;
    box-sizing: border-box;
    padding: 0 40rpx;



    .service {
        height: 58rpx;
        background: #f1f1f1;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        padding-left: 20rpx;
        padding-right: 20rpx;
        margin-left: 20rpx;
        margin-top: 20rpx;
        color: #666;
    }

    .active {
        background: #333333;
        color: #dbf046;
    }

    .parent {
        font-size: 26rpx;
        margin-top: 20rpx;
    }

}



.btn_box {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    background-color: #F8F8F8;
    padding-bottom: calc(10rpx + env(safe-area-inset-bottom));

    .submit {
        width: 482rpx;
        height: 78rpx;
        background: #333333;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
    }

    .reset {
        width: 168rpx;
        height: 78rpx;
        background: #ffffff;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
    }

    .box {
        padding: 0 30rpx;
        box-sizing: border-box;
        height: 98rpx;


        .add {
            color: #DBF046;
            background-color: #333333;
        }

    }
}
</style>